<script setup lang="ts">
import AppUtil from "/@/utils/app.ts";
import treeUtil from "/@/utils/treeUtil.ts";
import {useAttrs} from "vue";

const attrs = useAttrs()
const props = defineProps({
  modelValue:{

  }
})


const emits= defineEmits(['update:modelValue'])

let componentMap = AppUtil.getComponentPathTree();
const treeData = treeUtil.pathToTree(componentMap);
const selected = ref(null)
const handInputChange=()=> {
  emits('update:modelValue',selected.value ? '/'+selected.value.join('/'):  null)
}

watch(()=>props.modelValue,()=> {
  if (props.modelValue) {
    try {
      selected.value = props.modelValue.split('/').filter(value=>value.length > 0)
    } catch (e) {

    }
  }
})
</script>

<template>
  <ElCascader v-model="selected" ref="treeRef"  v-bind="attrs"
              clearable
              filterable
              :options="treeData" :props="{
        label: 'label',
        value: 'value',
        children: 'children',
        emitPath: true,
        checkStrictly: false,
        multiple: false
      }" :onChange="handInputChange" >
  </ElCascader>
</template>

<style scoped lang="scss">

</style>
